<template>
  <div class="productModal" v-show="show">
    <div class="bg-layer"></div>
    <div class="modal-box">

      <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="originPrice" label="原价" align="center"></el-table-column>
        <el-table-column prop="presentPrice" label="现价" align="center"></el-table-column>
        <el-table-column prop="proportion" label="团长佣金占比%" align="center"></el-table-column>
      </el-table>

      <div class="modal-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="select()">选 择</el-button>
      </div>

    </div>
  
  </div>
</template>

<script type="text/ecmascript-6">
// import api from "@/api/product";

const SUCCESS = 0;
export default {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      show: false,
      selectedList: []
    };
  },
  created() {
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
      this.selectedList = val;
    },
    select() {
      if (this.selectedList.length <= 0) {
        this.$message({
          type: "warning",
          message: "请选择商品"
        });
        return;
      }
      this.$emit("select", this.selectedList);
    }
  }
};
</script>

<style lang="less">
.productModal {
  .modal-box {
    width: 80%;
    height: 600px;
    background: #fff;
    z-index: 1050;
    text-align: center;
    border-radius: 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: auto;
    padding: 20px;

    .modal-footer {
      margin-top: 60px;
    }
  }
}
</style>
